<template>
  <el-dialog
    :title="dialogTitle"
    top="10vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="employee-container" style="padding: 10px;">
      <el-form
        ref="employee"
        :model="employee"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="employee.name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="employee.sex" label="男">男</el-radio>
          <el-radio v-model="employee.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="employee.birthday"
            type="date"
            placeholder="选择日期"
            @change="changeDate"
          />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="employee.age" readonly />
        </el-form-item>
        <el-form-item label="身份证" prop="cid">
          <el-input v-model="employee.cid" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="employee.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="employee.address" />
        </el-form-item>
        <el-form-item v-if="!id" label="入职时间" prop="joinTime">
          <el-date-picker
            v-model="employee.joinTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="基础工资" prop="baseWage">
          <el-input v-model="employee.baseWage" />
        </el-form-item>
        <el-form-item label="员工类型" prop="type">
          <el-select v-model="employee.type" clearable placeholder="请选择员工类型">
            <el-option label="洗车工" value="洗车工" />
            <el-option label="收银员" value="收银员" />
            <el-option label="迎宾导车员" value="迎宾导车员" />
            <el-option label="内饰员" value="内饰员" />
            <el-option label="美容技师" value="美容技师" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('employee')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('employee')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { getEmployeeInfo, modifyEmployeeInfo, addEmployee } from '@/api/employee'
import { Message } from 'element-ui'
const checkPhone = (rule, value, callback) => { // 注意: 自定义验证函数是放在data里的
  if (!value) {
    return callback(new Error('手机号不能为空'))
  } else {
    const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
    if (!reg.test(value)) {
      callback(new Error('请输入正确的手机号'))
    } else {
      callback()
    }
  }
}

const checkCID = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('身份证号不能为空'))
  } else {
    const reg = /((^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$))/
    if (!reg.test(value)) {
      callback(new Error('请输入正确的身份证号'))
    } else {
      callback()
    }
  }
}

export default {
  name: 'EmployeeDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      employee: {
        name: '',
        sex: '',
        age: '',
        birthday: '',
        cid: '',
        phone: '',
        type: '',
        baseWage: '',
        joinTime: '',
        address: ''
      },
      AddRules: { // 对话框表单验证
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
        baseWage: [{ required: true, message: '基础工资不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        joinTime: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }],
        cid: [{ required: true, trigger: 'blur', validator: checkCID }],
        phone: [{ required: true, trigger: 'blur', validator: checkPhone }],
        type: [{ required: true, message: '员工类型不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getEmployeeInfo(this.id).then(res => {
          if (res) {
            this.employee.name = res.data.data.name
            this.employee.sex = res.data.data.sex
            this.employee.age = res.data.data.age
            this.employee.birthday = res.data.data.birthday
            this.employee.cid = res.data.data.cid
            this.employee.address = res.data.data.address
            this.employee.phone = res.data.data.phone
            this.employee.baseWage = res.data.data.baseWage
            this.employee.type = res.data.data.type
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyEmployeeInfo(this.id, this.employee).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            addEmployee(this.employee).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.$refs[formName].resetFields()
                this.$emit('closeDialog')
              }
            })
            this.$emit('getTable')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.employee.resetFields()
      this.employee.id = ''
    },
    changeDate(date) {
      console.log(111)
      const now = new Date()
      const nowYear = now.getFullYear()
      const year = date.getFullYear()
      this.employee.age = nowYear - year
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 570px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 510px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
